import React, { useState } from 'react';
import './App.css'
import MessageBox from './views/slot/MessageBox';
import InputView from './views/slot/InputView';
import MsgList from './views/slot/MsgList';
const App = () => {
  const [list, setList] = useState([{ id: 1, msg: '楼主', user: 'wqw', time: '2023-06-30' }])

  const addMsg = (value) => {
    let msgObj = { id: list.length + 1, msg: value, user: 'wqw', time: new Date().toLocaleDateString() }
    setList([...list, msgObj])
  }
  return (
    <div className='msg-box'>
      <MessageBox topLayout={<InputView addMsg={addMsg} />} mainLayout={<MsgList list={list} />}>

        {/* 在开始和结束标签之间的内容，默认时props.children属性的值 */}
        <h1>留言板案例</h1>

      </MessageBox>
    </div>
  );
}

export default App;
